<template>
  <div class="field-box">
    <div class="header">
      <div class="header-icon small-icon"></div>
      <div class="header-icon middle-icon"></div>
      <div class="header-icon big-icon"></div>
      <div class="header-title">{{ info.title }}</div>
      <div class="header-icon big-icon"></div>
      <div class="header-icon middle-icon"></div>
      <div class="header-icon small-icon"></div>
    </div>
    <div class="field-data">
      <je-grid
        border
        height="2065"
        :auto-load="true"
        :size="size"
        :loading="loading"
        :data="filedData"
        :draggable="false"
        :header-cell-style="headerCellStyle"
      >
        <je-column type="seq" title="No." width="4%" align="center" :draggable="false" />
        <je-column field="type" title="分类" min-width="12%" :draggable="false" />
        <je-column field="name" title="字段名称" min-width="14%" :draggable="false" />
        <je-column field="code" title="字段编码" min-width="21%" :draggable="false" />
        <je-column field="remark" title="备注" min-width="49%" :draggable="false" />
      </je-grid>
    </div>
  </div>
</template>

<script>
  import { defineComponent, toRefs, onMounted, ref } from 'vue';
  import { Grid } from '@jecloud/ui';
  import { useI18n } from '@common/locales';
  import { RESOURCE_FIELD_DATA } from '@/helper/constant';
  export default defineComponent({
    name: 'SystemField',
    components: {
      JeGrid: Grid,
      JeColumn: Grid.Column,
    },
    setup() {
      const t = useI18n().t;
      const filedData = ref([]);
      const state = {
        info: {
          title: t('resourceBoard.field.title'),
        },
        size: 'middle',
        loading: true,
      };
      const headerCellStyle = () => {
        return {
          fontWeight: 'blob',
        };
      };
      onMounted(() => {
        state.loading = true;
        setTimeout(() => {
          filedData.value = RESOURCE_FIELD_DATA;
          state.loading = false;
        }, 500);
      });
      return {
        filedData,
        headerCellStyle,
        ...toRefs(state),
      };
    },
  });
</script>
<style>
  .field-box .field-data .je-grid .vxe-table--render-default .vxe-header--column.col--ellipsis,
  .field-box .field-data .je-grid .vxe-table--render-default .vxe-body--column.col--ellipsis,
  .field-box .field-data .je-grid .vxe-table--render-default .vxe-footer--column.col--ellipsis {
    height: 48px !important;
  }
</style>
<style scoped lang="less">
  .field-box {
    width: 100%;
    .header {
      width: 100%;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      margin-top: 20px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background-color: #3265f5;
      .header-icon {
        background: #ffffff;
        border-radius: 50%;
      }
      .small-icon {
        width: 4px;
        height: 4px;
        opacity: 0.2;
      }
      .middle-icon {
        width: 7px;
        height: 7px;
        opacity: 0.6;
        margin: 0 4px;
      }
      .big-icon {
        width: 10px;
        height: 10px;
      }
      .header-title {
        font-size: 18px;
        // font-family: 'PingFang SC, PingFang SC-Bold';
        font-weight: bold;
        color: #ffffff;
        padding: 0 10px;
      }
    }
    .field-data {
      width: 100%;
      .vxe-table--header {
        width: 100% !important;
      }
    }
  }
</style>
